<script setup>
import {ref} from 'vue'
const showLeft=ref()
const flag=ref()
const iconList1=ref([
	{
		icon:'../../static/drawer/消息.png',
		name:'我的消息'
	},
	{
		icon:'../../static/drawer/徽章.png',
		name:'勋章中心'
	},					
	{
		icon:'../../static/drawer/创意.png',
		name:'创作者中心'
	}])
const iconList2=ref([
	{
		icon:'../../static/drawer/塔罗-六芒星.png',
		name:'趣测'
	}
	,
	{
		icon:'../../static/drawer/票.png',
		name:'云村有票'
	},					
	{
			icon:'../../static/drawer/商城.png',
			name:'商城'
		},
		{
			icon:'../../static/drawer/锤子.png',
			name:'音乐收藏家'
		}
	])					
const iconList3=[
{
			icon:'../../static/drawer/设置.png',
			name:'设置'
		},
		{
			icon:'../../static/drawer/月亮.png',
			name:'深色模式'
		},
		{
			icon:'../../static/drawer/闹钟.png',
			name:'定时关闭'
		},
		{
			icon:'../../static/drawer/衣服.png',
			name:'个性装扮'
		},
		{
			icon:'../../static/drawer/边听边存.png',
			name:'边听边存'
		},
		{
			icon:'../../static/drawer/禁用.png',
			name:'音乐黑名单'
		},
		{
			icon:'../../static/drawer/隐私.png',
			name:'个人信息与隐私保护'
		},
		{
			icon:'../../static/分享.png',
			name:'分享'
		},
		{
			icon:'../../static/drawer/关于.png',
			name:'关于'
		}
	]							
const iconList4=ref([
	{
		icon:'../../static/drawer/切换.png',
							name:'切换账号'
	},
	{
		icon:'../../static/drawer/关机.png',
		name:'退出登录关闭'
	}					
])			

// const showDrawer=()=> {
// 	showLeft.value.open()
// }
// const closeDrawer=()=> {
// 	showLeft.value.close();
// }
const logOut=()=> {
	uni.navigateTo({
		url:'/pages/login/login'
	})
}
// defineExpose(showDrawer(),closeDrawer(),logOut(),open())
</script>
<template>
	<view>
					<view class="top">
						<view class="sub-top">
							<img src="../../static/tx.jpg">
							<span>溺毙20</span>
							<img src="../../static/drawer/向右更多.png" style="width: 20px;height: 20px;margin-top: 5px;">
						</view>
						<img src="../../static/drawer/扫码.png">
					</view>
					<view>
						
					</view>
					<view class="message">
						<view class="sub-message" v-for="item in iconList1">
							<view class="left">
								<img :src="item.icon">
								<view>{{item.name}}</view>
							</view>
							
							<view class="right">
								<view v-if="flag">
									99+
								</view>
								<img src="../../static/drawer/向右更多.png" >
							</view>	
						</view>
					</view>
					<view class="message">
						<view class="sub-message" v-for="item in iconList2">
							<view class="left">
								<img :src="item.icon">
								<view>{{item.name}}</view>
							</view>
							
							<view class="right">
								<view v-if="flag">
									99+
								</view>
								<img src="../../static/drawer/向右更多.png" >
							</view>	
						</view>
					</view>
					<view class="message">
						<view class="sub-message" v-for="item in iconList3">
							<view class="left">
								<img :src="item.icon" >
								<view>{{item.name}}</view>
							</view>
							
							<view class="right">
								<view v-if="flag">
									99+
								</view>
								<img src="../../static/drawer/向右更多.png" >
							</view>	
						</view>
					</view>
					<view class="message">
						<!-- <view class="sub-message">
							<view class="left">
								<img src="../../static/drawer/票.png">
								<view>切换账号</view>
							</view>
							
							<view class="right">
								<img src="../../static/drawer/向右更多.png" >
							</view>	
						</view> -->
						<view class="sub-message" v-for="item in iconList4">
							<view class="left" @click="logOut">
								<img :src="item.icon">
								<view>{{item.name}}</view>
							</view>
							
							<view class="right">
								<img src="../../static/drawer/向右更多.png" >
							</view>	
						</view>
					</view>
<!-- 				</scroll-view>
			</view>
		</uni-drawer> -->
	</view>
</template>


<style scoped>
.top{
	display: flex;
	color: #c4c4c4;
	height: 30px;
	line-height: 30px;
	justify-content: space-between;
	margin: 10px;
	/* position: fixed; */
	
}
.top :nth-child(1){
	border-radius:50% ;
}
.sub-top{
	width: 120px;
	display: flex;
	height: 30px;
	line-height: 30px;
	justify-content: space-around;
}
.message{
	color: #c4c4c4;
	background-color: #2c2c2c;
	width: 94%;
	margin: 20px auto;
	border-radius: 10px;
}
.sub-message{
	display: flex;
	justify-content: space-between;
	height: 30px;
	line-height: 30px;
	margin: 5px 20px;
	/* border-bottom: lightgray solid 1px; */
}
.sub-message img{
	width: 20px;
	height: 20px;

}
.left{
	display: flex;
}
.left :nth-child(1){
	margin-top: 5px;
	margin-right: 10px;
}
.right{
	display: flex;
}
.right img{
		margin-top: 5px;
}	
</style>